<template>
  <div class="product">
    <Search 
      searchBtnText="查询搜索" @getSreach="getSreach"
      @reset="reset"
    >
      <el-form :inline="true" :model="searchList" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input v-model="searchList.keyword" placeholder="商品名称"></el-input>
        </el-form-item>

        <el-form-item label="商品货号">
          <el-input v-model="searchList.productSn" placeholder="商品货号"></el-input>
        </el-form-item>

        <el-form-item label="商品分类">
          <el-cascader
            v-model="searchList.productCategoryId"
            :options="categoryList"
            :props="categoryProp"
            @change="handleChange"></el-cascader>
        </el-form-item>

        <el-form-item label="商品品牌">
          <el-select v-model="searchList.brandId" placeholder="请选择">
            <el-option v-for="(item,index) in brandList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="上架状态">
          <el-select v-model="searchList.publishStatus" placeholder="全部">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="审核状态">
          <el-select v-model="searchList.verifyStatus" placeholder="全部">
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="未审核" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Search>
    <DataList></DataList>
    <TableBar :tableData="tableList"></TableBar>
    <Fenye 
      :allNum="total" 
      :curPage="pageNum" 
      :num="pageSize" 
      @currChange="curChange" @sizeChange="sizeChange"
    ></Fenye>
  </div>
</template>

<script>
import Search from "../../components/common/search/Search.vue";
import DataList from "../../components/common/dataList/DataList.vue"
import TableBar from "../../components/common/tableBar/TableBar.vue"
import Fenye from "../../components/common/fenye/Fenye.vue"

import {getBrandList,getCategoryList,getProductList} from "../../api"

export default {
  name: "product",
  components: {
    Search,
    DataList,
    TableBar,
    Fenye
  },
  data() {
    return {
      searchList:{
        keyword:"",
        productSn:"",
        productCategoryId:'',
        brandId:"",
        publishStatus:"",
        verifyStatus:""
      },
      brandList:[],
      categoryList:[],
      categoryProp:{
        label:"name",
        value:"id",
        emitPath:false
      },
      tableList:[],
      total:0,
      pageNum:1,
      pageSize:5
    }
  },
  created() {
    getBrandList().then(res => {
      this.brandList = res.data.data
    })
    getCategoryList().then(res => {
      this.categoryList = res.data.data
    })
    this.getGoodsInfo()
  },
  methods:{
    handleChange(){

    },
    curChange(val){
      console.log(val)
      this.pageNum = val
      this.getGoodsInfo()
    },
    sizeChange(val){
      this.pageSize = val
      this.getGoodsInfo()
    },
    // 获取商品数据函数
    getGoodsInfo(){
      console.log(this.searchList)
      this.searchList.pageNum = this.pageNum
      this.searchList.pageSize = this.pageSize
      getProductList(this.searchList).then(res => {
      res.data.data.list.forEach((item,index,arr)=>{
        if(item.publishStatus == 1){
          item.publishStatus = true
        }else{
          item.publishStatus = false
        }

        if(item.newStatus == 1){
          item.newStatus = true
        }else{
          item.newStatus = false
        }

        if(item.previewStatus == 1){
          item.previewStatus = true
        }else{
          item.previewStatus = false
        }

      })
      console.log(res.data)
      this.tableList = res.data.data.list
      this.total = res.data.data.total
      this.pageNum = res.data.data.pageNum
      this.pageSize =  res.data.data.pageSize
    })
    },
    getSreach(){
      this.getGoodsInfo()
    },
    reset(){
      this.searchList = {
        keyword:"",
        productSn:"",
        productCategoryId:"",
        brandId:"",
        publishStatus:"",
        verifyStatus:""
      }
    }
  }
};
</script>

<style scoped lang="less">
  .demo-form-inline{
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 30%;
    }
  }
  
</style>